<template>
  <div class="goods-item" @click="goDetail(goodsItem.iid)">
    <img :src="goodsItem.show.img" alt="" @load="imgLoad">
    <div class="goods-info">
      <p>{{goodsItem.title}}</p>
      <span class="price">{{goodsItem.price}}</span>
      <span class="collect">{{goodsItem.cfav}}</span>
    </div>
  </div>
</template>

<script>
export default {
  props:{
    goodsItem:{
      type:Object,
      default(){
        return {}
      }
    }
  },
  methods:{
    // 监听item中图片加载完成
    imgLoad(){
      // console.log(111)
      this.$bus.$emit('itemImageLoad')
    },
    goDetail(id){
      this.$router.push(`/detail/${id}`)
    }
  }
};
</script>
<style scoped>
.goods-item{
  width: 48%;
  /* padding-bottom:40px; */
}
.goods-item img{
  width: 100%;
  height: 300px;
  border-radius: 5px;
}

.goods-info{
  font-size: 12px;
}
</style>
